<template>
  <div class="use-page">
    <div class="header flex-justify-between">
      <div class="logo flex-align-center">
        <div class="logo-img"></div>
        <div class="theme">MJ智能画图</div>
      </div>
      <div class="personal-center flex-justify-end">
        <div class="charge personal-service flex" @click="chargeClick">
          <div class="service-img"><img :src="chargeIcon" alt="" /></div>
          <div class="service-text">{{ userInfoData.isVip === 1 ? '续费' : '充值' }}</div>
        </div>
        <div class="custom-service personal-service flex" @click="serviceClick">
          <div class="service-img"><img :src="customIcon" alt="" /></div>
          <div class="service-text">人工客服</div>
        </div>
        <div class="save-url personal-service flex" @click="saveUrlClick">
          <div class="service-img"><img :src="saveUrlIcon" alt="" /></div>
          <div class="service-text">收藏本站</div>
        </div>

        <div class="personal-info flex-center">
          <div class="portrait-img">
            <img :src="userInfoData.portrait ? userInfoData.portrait : personalInfoIcon" alt="" />
          </div>
          <template v-if="!personalSpreadShow">
            <div class="service-text" @click="showPersonalSpread">个人中心</div>
            <div class="down-spread flex-center">
              <img :src="downIcon" alt="" />
            </div>
          </template>
          <template v-if="personalSpreadShow">
            <div class="service-text" @click="showPersonalClose">个人中心</div>
            <div class="down-spread flex-center">
              <img :src="upIcon" alt="" />
            </div>
          </template>
        </div>
        <div v-show="personalSpreadShow" class="personal-spread" @mouseleave="showPersonalClose">
          <div class="line-one flex-row-justify-between">
            <div class="left flex-align-center">
              <div class="avatar">
                <el-upload
                  class="avatar-uploader"
                  accept=".jpg,.png,.JPG,.PNG"
                  :action="baseUrl + 'mldjourneyapp/upload/upload'"
                  :limit="1"
                  :headers="headers"
                  :show-file-list="false"
                  :before-upload="beforeAvatarUpload"
                  :on-success="handleAvatarSuccess"
                >
                  <img
                    :src="userInfoData.portrait ? userInfoData.portrait : personalInfoIcon"
                    alt=""
                  />
                </el-upload>
              </div>
              <div v-if="!editMode" class="uname">{{ userInfoData.name }}</div>
              <div v-if="editMode" class="uname">
                <input v-model="unameContent" class="input-box" type="text" @blur="disableEdit" />
              </div>
            </div>
            <div class="right flex-align-center">
              <div class="edit" @click="enableEdit"></div>
            </div>
          </div>
          <div class="spread-bottom flex-column-justify-center">
            <div class="line-two">
              <div class="item-top">会员开通时间</div>
              <div class="item-bottom">{{ userInfoData.startTime }}</div>
            </div>
            <div class="line-three">
              <div class="item-top">会员到期时间</div>
              <div class="item-bottom">{{ userInfoData.endTime }}</div>
            </div>
            <div class="line-two">
              <div class="item-top">付费模型剩余次数</div>
              <div class="item-bottom">{{ userInfoData.paintCount }}</div>
            </div>
            <div class="line-three">
              <div class="item-top">免费模型剩余次数</div>
              <div class="item-bottom">{{ userInfoData.freeCount }}</div>
            </div>
            <div class="line-four">
              <div class="item-top" @click="logoutClick">退出登录</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="use-content flex">
      <div class="content-left">
        <div class="describe flex">
          <div class="describe-icon"></div>
          <div class="describe-text">
            <div class="text-header">MJ智能画图</div>
            <div class="text-theme">
              一键AI绘图，小白快速上手，极速出图永不等待，输入描述词，点击下方"立即生成"按钮即可成图！
            </div>
          </div>
        </div>
        <div class="now-create flex-center" @click="nowCreateFun">立即生成</div>
        <div class="painting-description">
          <div class="description-header">绘画描述</div>
          <div class="description-content">
            <textarea
              v-model="aiImageData.content"
              class="textarea"
              placeholder="请用文字描述您希望绘制的画面，注意遵守平台规范，避免涉及未成年人、成人内容或暴力血腥等不适主题。"
            ></textarea>
          </div>
        </div>
        <div class="kindly-reminder flex-center">
          下方勾选的参考提示词会展现在这里，与输入的描述词一起自动提交
        </div>
        <div class="model-select">
          <div class="model-header">模型选择</div>
          <div class="model-content">
            <el-select v-model="aiImageData.modelId" :teleported="false" placeholder="Select">
              <el-option
                v-for="item in imgModelListData"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                @click="modelSelectClick(item)"
              />
            </el-select>
          </div>
        </div>
        <div class="style-choice">
          <div class="style-header">风格选择</div>
          <div class="style-content">
            <div class="content-nav flex">
              <div
                v-for="(item, index) in styleChioceListData"
                :key="item.id"
                :class="['nav-item', 'flex-center', item.active ? 'nav-item-active' : '']"
                @click="styleChoiceClick(item, index)"
              >
                {{ item.name }}
              </div>
            </div>
            <div class="content-all flex">
              <div
                v-for="(item, index) in styleItemListData"
                :key="item.id"
                :class="[
                  'content-item',
                  'flex-align-end',
                  item.active ? 'content-item-active' : ''
                ]"
                :style="{ background: 'url(' + item.cover + ')', backgroundSize: 'cover' }"
                @click="styleItemClick(item, index)"
              >
                <div class="item-title">{{ item.name }}</div>
              </div>
            </div>
            <!-- <div v-if="styleItemListData.length > 8" class="more-retract flex-center">
                <div class="more-btn">更多</div>
                <div class="retract-btn">收起</div>
              </div> -->
          </div>
        </div>
        <div class="generate-size">
          <div class="size-header">生成尺寸</div>
          <div class="size-content flex">
            <div
              v-for="(item, index) in sizeListData"
              :key="item.id"
              :class="['box-common', item.active ? 'box-common-active' : '']"
              @click="sizeClick(item, index)"
            >
              <div
                :class="[
                  item.title == '1:1' ? 'size-one-box-bg' : '',
                  item.title == '9:16' ? 'size-two-box-bg' : '',
                  item.title == '16:9' ? 'size-three-box-bg' : '',
                  item.title == '3:4' ? 'size-four-box-bg' : '',
                  item.title == '4:3' ? 'size-five-box-bg' : ''
                ]"
              ></div>
              <div class="box-text">{{ item.title }}</div>
            </div>
          </div>
        </div>
        <div v-if="aiImageData.type === 1" class="upload-pictures">
          <div class="upload-header">上传参考图</div>
          <div v-if="aiImageData.img" class="upload-content-img">
            <div
              class="backgroundUpload"
              :style="{ backgroundImage: `url(${aiImageData.img})` }"
            ></div>
            <el-image :src="aiImageData.img" style="height: 100%"></el-image>
            <div class="backgroundUploadDelete">
              <div
                style="
                  width: 50px;
                  height: 35px;
                  background-color: rgba(61, 61, 67, 0.5);
                  border-radius: 5px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
              >
                <Delete
                  style="width: 20px; height: 20px; color: black"
                  @click="aiImageData.img = null"
                />
              </div>
            </div>
          </div>
          <div v-else class="upload-content">
            <div class="dotted-box">
              <el-upload
                class="upload-demo"
                accept=".jpg,.png,.JPG,.PNG"
                drag
                name="file"
                :action="baseUrl + 'mldjourneyapp/upload/upload'"
                :limit="1"
                :headers="headers"
                :before-upload="handleBeforeUpload"
                :on-success="handleSuccess"
              >
                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                <div class="el-upload__text">请将参考图拖到此处，或点击上传</div>
                <div class="el-upload__text">只能上传jpg/png文件，且不超过5MB</div>
                <template #tip>
                  <div class="el-upload__tip"></div>
                </template>
              </el-upload>
            </div>
          </div>
        </div>
        <div v-if="aiImageData.img" class="image-similarity">
          <div class="similarity-header">图片相似度</div>
          <div class="similarity-content flex-justify-between">
            <el-slider v-model="aiImageData.scale" placement="bottom" :show-tooltip="false" />
            <div class="similarity-value">{{ aiImageData.scale + '%' }}</div>
          </div>
        </div>
        <!-- </el-form> -->
        <div class="bottom-empty"></div>
      </div>
      <div ref="scrollContainer" class="content-right" @scoll="scrollBottom">
        <!-- 我的列表  -->
        <div v-if="myListData.length > 0" class="create-result">
          <div v-for="item in myListData" :key="item.id" class="result-item">
            <div class="result-header flex">
              <div class="user-avatar">
                <img
                  :src="userInfoData.portrait ? userInfoData.portrait : personalInfoIcon"
                  alt=""
                />
              </div>
              <div class="header-right">
                <div class="user-name">
                  {{ userInfoData.name ? userInfoData.name : 'MJ智能画图' }}
                </div>
                <div class="user-time">{{ item.createTime }}</div>
              </div>
            </div>
            <div class="result-describe">
              {{ item.content }}
            </div>
            <div v-if="item.taskStatus === 0 || item.taskStatus === -1">
              <div class="sliderImgContainer">
                <div class="sliderImg"></div>
                <div class="sliderImgText">模型正在渲染, 马上就好...</div>
              </div>
            </div>
            <div v-else-if="item.taskStatus === 2" class="result-image flex">
              <div class="flex flex-align-center userImgContainer">
                <img
                  :src="item.url"
                  class="userImg"
                  @mouseover="imgList = [item.url]"
                  @click="
                    imgList = [item.url];
                    showViewer = true;
                  "
                />
                <div class="userImgDownloadBtn">
                  <div
                    style="
                      width: 50px;
                      height: 30px;
                      background-color: rgba(61, 61, 67, 0.5);
                      border-radius: 5px;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                    "
                  >
                    <Download
                      style="width: 30px; height: 30px; color: black; z-index: 99"
                      @click="downImg(item.url)"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div class="result-btn-line-one flex">
              <div class="edit">编辑</div>
              <div
                v-for="(item, index) in 4"
                :key="index"
                class="edit-item flex-center"
                @click="handleEdit"
              >
                U {{ item }}
              </div>
            </div>
            <div class="result-btn-line-one flex">
              <div class="edit">变换</div>
              <div
                v-for="(item, index) in 4"
                :key="index"
                class="edit-item flex-center"
                @click="handleEdit"
              >
                V {{ item }}
              </div>
            </div>
            <div class="result-btn-line-two">保存图片</div>
          </div>
        </div>
        <!-- 推荐列表 -->
        <div v-if="myListData.length === 0 && recommendListData.length > 0" class="create-result">
          <div v-for="item in recommendListData" :key="item.id" class="result-item">
            <div class="result-header flex">
              <div class="user-avatar">
                <img :src="item.portrait ? item.portrait : personalInfoIcon" alt="" />
              </div>
              <div class="header-right">
                <div class="user-name">{{ item.name ? item.name : 'MJ智能画图' }}</div>
                <div class="user-time">{{ item.createTime }}</div>
              </div>
            </div>
            <div class="result-describe">
              {{ item.content }}
            </div>
            <div class="result-image flex">
              <div class="flex flex-center flex-align-center userImgContainer">
                <img
                  :src="item.url"
                  class="userImg"
                  @click="
                    imgList = [item.url];
                    showViewer = true;
                  "
                />
                <div class="userImgDownloadBtn">
                  <div
                    style="
                      width: 50px;
                      height: 30px;
                      background-color: rgba(61, 61, 67, 0.5);
                      border-radius: 5px;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                    "
                  >
                    <Download
                      style="width: 30px; height: 30px; color: black; z-index: 99"
                      @click="downImg(item.url)"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div class="result-btn-line-one flex">
              <div class="edit">编辑</div>
              <div
                v-for="(item, index) in 4"
                :key="index"
                class="edit-item flex-center"
                @click="handleEdit"
              >
                U {{ item }}
              </div>
            </div>
            <div class="result-btn-line-one flex">
              <div class="edit">变换</div>
              <div
                v-for="(item, index) in 4"
                :key="index"
                class="edit-item flex-center"
                @click="handleEdit"
              >
                V {{ item }}
              </div>
            </div>
            <div class="result-btn-line-two">保存图片</div>
          </div>
        </div>
      </div>
    </div>
    <!-- </div> -->
    <!-- 付费弹窗  width="1184px" -->
    <div class="pay-dialog">
      <el-dialog
        v-model="payDialogVisible"
        :close-on-click-modal="false"
        :model-append-to-body-center="false"
        @close="chargeClose()"
      >
        <template #header="{ titleId, titleClass }">
          <div class="my-header flex-justify-between">
            <div :id="titleId" :class="titleClass" flex-align-center>
              <div class="avatar-icon">
                <img
                  :src="userInfoData.portrait ? userInfoData.portrait : personalInfoIcon"
                  alt=""
                />
              </div>
              <div class="user-name">
                {{ userInfoData.name }}
              </div>
            </div>
            <div class="additional-remarks">成为MJ会员即可使用</div>
            <div class="close-icon" @click="chargeClose()"></div>
          </div>
        </template>
        <div class="pay-dialog-content flex-justify-between">
          <div class="left">
            <div class="vip-image flex-justify-end">
              <div class="vip-image-bg"></div>
            </div>
            <div class="describe-header">AI绘图首选工具</div>
            <div class="describe-item margin-7">高清大图一键生成</div>
            <div class="describe-item">价格便宜，质量高，功能丰富！</div>
            <div class="describe-header margin-26">开通会员您即可享受</div>
            <div class="vip-describe-item margin-11 flex-align-center">
              <div class="icon-item icon-one"></div>
              <div>专属客服一对一答疑</div>
            </div>
            <div class="vip-describe-item flex-align-center">
              <div class="icon-item icon-two"></div>
              <div>24小时在线服务</div>
            </div>
            <div class="vip-describe-item flex-align-center">
              <div class="icon-item icon-three"></div>
              <div>一键上手绘图，新手秒变高手</div>
            </div>
            <div class="wechat-number flex-center">客服微信号：tomorrowff</div>
          </div>
          <div class="right">
            <div class="top flex-justify-between">
              <div
                v-for="(item, index) in rechargeList"
                :key="item.id"
                :class="[
                  'top-item',
                  item.active ? 'top-item-active' : '',
                  'flex-column-align-center',
                  'top-item-one'
                ]"
                @click="handleRecharge(item, index)"
              >
                <div class="item-title">{{ item.name }}</div>
                <div class="item-price">{{ item.title }}</div>
                <div class="item-introduce flex-align-center" v-html="item.remark"></div>
              </div>
            </div>
            <div class="bottom flex">
              <div class="pay-code">
                <img :src="qrcode" alt="" />
              </div>
              <div class="pay-introduce">
                <div class="pay-price">
                  {{ bottpmPrice }}<span v-if="bottpmPrice % 1 == 0">.00</span>
                </div>
                <div class="pay-type flex-align-center">
                  <div class="type-icon"></div>
                  <div class="type-text">微信扫码支付</div>
                </div>
                <div class="pay-protocol flex-align-center">
                  <div class="flex-center check-icon-box">
                    <div class="check-icon"></div>
                  </div>
                  <div class="check-text">
                    我已阅读同意<span class="link-text" @click="memberAgreementClick"
                      >《会员服务协议》</span
                    >
                  </div>
                </div>
              </div>
              <div class="refurbish-code flex-center" @click="getQrCodeFun()">立即支付</div>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
    <!-- 支付成功弹窗 -->
    <div class="pay-end-dialog">
      <el-dialog v-model="payEnddialogVisible" :close-on-click-modal="false">
        <div class="pay-end-dialog-content flex-column-align-center">
          <div class="line-one"></div>
          <div class="line-two">充值成功</div>
          <div class="line-three">您已升级为尊贵会员</div>
          <div class="line-four flex-center" @click="payEnddialogClose">立即体验特权</div>
          <div class="line-five">建议收藏本网站：</div>
          <div class="line-six">https://mldjourney.lesuzyu.cn/</div>
          <div class="line-seven">💌 专属客服微信：<span>tomorrowff</span>（搜索添加）</div>
        </div>
        <div class="close-icon" @click="payEnddialogClose"></div>
      </el-dialog>
    </div>
    <!-- 付费拦截弹窗 -->
    <div class="pay-intercept-dialog">
      <el-dialog v-model="payInterceptdialogVisible" :close-on-click-modal="false">
        <div class="pay-intercept-dialog-content flex-column-align-center">
          <div class="intercept-header">恭喜你 抽中惊喜折扣！</div>
          <div class="intercept-content flex-justify-center">
            <div class="left flex-column-align-center">
              <div class="left-one">{{ interceptShowList[0].name }}</div>
              <div class="left-two">{{ interceptShowList[0].title }}</div>
            </div>
            <div class="right flex-column-justify-center">
              <div
                class="item-introduce flex-align-center"
                v-html="interceptShowList[0].remark"
              ></div>
            </div>
          </div>
          <div class="intercept-footer flex">
            <div class="pay-code">
              <img :src="interceptQrcode" alt="" />
            </div>
            <div class="pay-introduce">
              <div class="pay-price">
                {{ interceptShowList[0].price
                }}<span v-if="interceptShowList[0].price % 1 == 0">.00</span>
              </div>
              <div class="pay-type flex-align-center">
                <div class="type-icon"></div>
                <div class="type-text">微信扫码支付</div>
              </div>
              <div class="pay-protocol flex-align-center">
                <div class="flex-center check-icon-box">
                  <div class="check-icon"></div>
                </div>
                <div class="check-text">
                  我已阅读同意<span class="link-text" @click="memberAgreementClick"
                    >《会员服务协议》</span
                  >
                </div>
              </div>
            </div>
            <div class="refurbish-code flex-center" @click="getQrCodeFun()">立即支付</div>
          </div>
        </div>
        <div class="close-icon" @click="interceptClose"></div>
      </el-dialog>
    </div>
    <!-- 图片放大 -->
    <div class="image-dialog">
      <el-dialog v-model="dialogVisible" width="70%">
        <div class="image-dialog-content">
          <img :src="dialogImageUrl" alt="" />
        </div>
        <div class="close-icon" @click="imgDialogClose"></div>
        <div class="download-icon" @click="downloadImage(dialogImageUrl)">
          <img src="@/assets/images/use/download.png" alt="" />
        </div>
      </el-dialog>
    </div>
    <!-- 画图次数用完 -->
    <div class="end-dialog">
      <el-dialog v-model="endDialogVisible">
        <div class="end-dialog-content">
          <div class="line-one">画图次数不足</div>
          <div class="line-two">您的画图次数不足，请购买资源包</div>
          <div class="line-three flex-center" @click="toBuyFun">立即购买</div>
        </div>
        <div class="close-icon" @click="endDialogClose"></div>
      </el-dialog>
    </div>
    <el-image-viewer v-if="showViewer" :url-list="imgList" :onClose="closeViewer">
    </el-image-viewer>
  </div>
</template>
<script setup>
import { ElMessage } from 'element-plus';

// import { CircleCloseFilled } from '@element-plus/icons-vue';
import { Delete, Download, UploadFilled } from '@element-plus/icons-vue';
import chargeIcon from '@/assets/images/use/charge-icon.png';
import customIcon from '@/assets/images/use/custom-service-icon.png';
import saveUrlIcon from '@/assets/images/use/save-url-icon.png';
import personalInfoIcon from '@/assets/images/use/personal-info-icon.png';
import downIcon from '@/assets/images/use/down-icon.png';
import upIcon from '@/assets/images/use/up-icon.png';
import { ref, reactive, onMounted } from 'vue';
import {
  imgLoadHttp,
  userInfoHttp,
  loginOutHttp,
  rechargeListHttp,
  imgModelListHttp,
  styleSizeListHttp,
  nowCreatHttp,
  getMyListHttp,
  getRecommendListHttp,
  getQrCodeHttp,
  getPayStatusHttp,
  changeUserInfoHttp,
  getDetailsListHttp
} from '@/api/modules/common/index.js';
import { useRouter, useRoute } from 'vue-router';
// import { get } from 'lodash';
const router = useRouter();
import { debounce } from 'lodash';

const form = ref({ phone: '', code: '' }); // 登录信息

const dialogImageUrl = ref('');
const dialogVisible = ref(false);
const endDialogVisible = ref(false);

const payDialogVisible = ref(false);
const payEnddialogVisible = ref(false);
const payInterceptdialogVisible = ref(false);
const chargeTimer = ref(null);
const interceptChargeTimer = ref(null);
const chargeId = ref(''); //充值ID
const qrcode = ref('');
const bottpmPrice = ref('');
const imgList = ref([]);
const showViewer = ref(false);

const interceptQrcode = ref('');

const aiImageData = reactive({
  img: '',
  content: '',
  modelId: '',
  styleId: '',
  scale: 50,
  sizeId: '',
  type: ''
});
const avaImageData = reactive({
  imageStr: ''
});

let editMode = ref(false); // 编辑信息
let unameContent = ref(''); // 名称信息

let rechargeList = ref([]); // 充值列表
let interceptList = ref([]); // 拦截列表

let imgModelListData = ref([]); // 模型列表
let styleChioceListData = ref([]); // 风格列表
let styleItemListData = ref([]); // 风格详情列表
let sizeListData = ref([]); // 尺寸列表
let myListData = ref([]); //我的列表
const myListIsLoading = ref(false);
const myListNoMore = ref(false);
const recommendIsLoading = ref(false);
const recommendListNoMore = ref(false);

let baseUrl = window.global.apiURL;
// const myListIsLoading = ref(false);
// const myListHasMore = ref(true);
const page = ref({
  current: 1,
  size: 10,
  records: []
});
const pages = ref({
  current: 1,
  size: 10,
  records: []
});

let recommendListData = ref([]); //推荐列表
const headers = reactive({
  token: localStorage.getItem('aiToken') || ''
});

const userInfoData = ref({}); // 用户信息
const interceptShowList = ref([
  {
    name: '',
    price: '',
    remark: ''
  }
]); //拦截框信息

let personalSpreadShow = ref(false); // 协议勾选Flag
const scrollContainer = ref(null);
// 防抖处理滚动事件
// const myListHandleScroll = debounce(() => {
//   const { scrollTop, clientHeight, scrollHeight } = scrollContainer.value;
//   if (scrollTop + clientHeight >= scrollHeight - 50 && !myListIsLoading.value) {
//     getMyListFun();
//   }
// }, 200);

onMounted(() => {
  initPage();
  scrollContainer.value?.addEventListener('scroll', scrollBottom);
});
onUnmounted(() => {
  clearInterval(chargeTimer.value);
  clearInterval(interceptChargeTimer.value);
  chargeTimer.value = null;
  interceptChargeTimer.value = null;
});
async function initPage() {
  await userInfoFun();
  // getRechargeList();
  imgModelListFun();
  styleSizeListFun();
  getMyListFun();
  // getRecommendListFun();
}
function endDialogClose() {
  endDialogVisible.value = false;
}
function toBuyFun() {
  endDialogVisible.value = false;
  chargeClick();
}
function memberAgreementClick() {
  // let jumpUrl = window.location.origin + window.location.pathname + '#/memberAgreement';
  let jumpUrl = window.global.apiURL + 'manager/agreement.html?id=3';
  window.open(jumpUrl);
}
function enableEdit() {
  editMode.value = true;
}
function disableEdit() {
  editMode.value = false;
  if (unameContent.value) {
    let data = { name: unameContent.value };
    changeUserInfoHttp(data).then(res => {
      if (res.code === 0) {
        ElMessage.success('修改成功');
        showPersonalClose();
        userInfoFun();
      } else {
        ElMessage.warning(res.msg);
      }
    });
  }
}

// 图片预览
function handlePictureCardPreview(file) {
  dialogImageUrl.value = file;
  dialogVisible.value = true;
}
// 操作编辑
function handleEdit() {
  console.log(userInfoData.value.isVip, 'userInfoData.value.isVip');

  if (userInfoData.value.isVip == 1) {
    ElMessage.warning('该功能内测中，如需了解详情请咨询客服');
    return;
  } else {
    chargeClick();
  }
}

// 充值结束弹窗关闭
function payEnddialogClose() {
  payEnddialogVisible.value = false;
  initPage();
}
// 图片弹窗关闭
function imgDialogClose() {
  dialogVisible.value = false;
}
// 获取用户信息
function userInfoFun() {
  userInfoHttp()
    .then(res => {
      if (res.code === 0 && res.data) {
        userInfoData.value = res.data;
        localStorage.setItem('userInfo', JSON.stringify(res.data));
      } else if (res.code === -1) {
        // 跳转首页
        comebackIndex();
      }
    })
    .catch(err => {
      if (err.code === -1) {
        // 跳转首页
        comebackIndex();
      }
    });
}

// 充值弹窗关闭
function chargeClose(val) {
  clearInterval(chargeTimer.value);
  chargeTimer.value = null;

  userInfoHttp().then(res => {
    if (res.code === 0 && res.data && res.data.isVip !== 1) {
      let resItem = undefined;
      resItem = rechargeList.value.filter(item => {
        return item.active == true;
      });

      let resId = resItem[0].discountId;

      if (resId) {
        interceptShowList.value = interceptList.value.filter(item => {
          return item.id == resId;
        });

        payInterceptdialogVisible.value = true;
        getInterceptQrCodeFun(interceptShowList.value[0].id);
      }
    }
  });

  payDialogVisible.value = false;
  userInfoFun();
}
function interceptClose() {
  payInterceptdialogVisible.value = false;
  clearInterval(interceptChargeTimer.value);
  interceptChargeTimer.value = null;
  userInfoFun();
}
// AI图片生成
function nowCreateFun() {
  if (userInfoData.value.isVip !== 1) {
    chargeClick();
    return;
  }

  if (aiImageData.content == '') {
    ElMessage.error('请输入图片描述');
    return;
  }
  if (aiImageData.modelId == '') {
    ElMessage.error('请选择模型');
    return;
  }

  if (aiImageData.styleId == '') {
    ElMessage.error('请选择风格');
    return;
  }
  if (aiImageData.sizeId == '') {
    ElMessage.error('请选择尺寸');
    return;
  }
  // if (aiImageData.img) {
  //   aiImageData.type = 1;
  // } else {
  //   aiImageData.type = 0;
  // }
  // if (aiImageData.type == 1 && aiImageData.imageStr == '') {
  //   ElMessage.error('请上传图片');
  //   return;
  // }
  let data = {
    content: aiImageData.content,
    modelId: aiImageData.modelId,
    styleId: aiImageData.styleId,
    scale: aiImageData.scale,
    sizeId: aiImageData.sizeId,
    type: aiImageData.type,
    img: aiImageData.img
  };

  // let formData = new FormData();
  // formData.append('file', JSON.stringify(data));

  nowCreatHttp(data)
    .then(res => {
      if (res.code == 0) {
        // ElMessage.success('图片生成中');
        // 我的列表接口
        setTimeout(() => {
          scrollContainer.value.scrollTo({ top: 0, behavior: 'smooth' });
          myListNoMore.value = false;
          getMyListFun(6);
          userInfoFun();
        }, 500);
      }
    })
    .catch(err => {
      if (err.code === -1) {
        // 跳转首页
        comebackIndex();
      } else if (err.code === -5) {
        endDialogVisible.value = true;
      }
      userInfoFun();
    });
}
let creatingList = [];
// 我的列表接口
function getMyListFun(sign) {
  myListIsLoading.value = true;
  if (sign === 6) {
    myListData.value = [];
    page.value.current = 1;
    page.value.size = 10;
  }
  let data = {
    current: page.value.current,
    size: page.value.size
  };

  getMyListHttp(data)
    .then(res => {
      if (res.code === 0) {
        if (res.data.records && res.data.records.length > 0) {
          page.value.current++;
          myListData.value = [...myListData.value, ...res.data.records];
        } else if (res.data.records.length === 0) {
          myListNoMore.value = true;
        }
        creatingList = res.data.records.filter((item, index) => {
          return item.taskStatus === 0 || item.taskStatus === -1;
        });

        let timer = null;
        if (creatingList.length > 0) {
          refreshRunListFun();
        } else if (creatingList.length === 0) {
          clearTimeout(timer);
        }
        if (myListData.value.length === 0) {
          getRecommendListFun();
        }
      }
    })
    .catch(err => {
      if (err.code === -1) {
        // 跳转首页
        comebackIndex();
      }
    });
  myListIsLoading.value = false;
}

//查询运行中的图片，并更新状态
function refreshRunListFun() {
  if (creatingList.length == 0) {
    return;
  }
  let t = setInterval(function () {
    if (creatingList.length > 0) {
      let idList = creatingList.map((item, index) => item.id);
      getDetailsListHttp(idList.join()).then(({ data }) => {
        let cMap = data
          .filter(item => item.taskStatus > 0)
          .reduce((map, element) => {
            map.set(element.id, element);
            return map;
          }, new Map());
        if (cMap.size > 0) {
          for (let item of creatingList) {
            if (cMap.has(item.id)) {
              item.url = cMap.get(item.id).url;
              item.taskStatus = cMap.get(item.id).taskStatus;
              for (let index in myListData.value) {
                if (myListData.value[index].id === item.id) {
                  let inItem = myListData.value[index];
                  inItem.url = cMap.get(item.id).url;
                  inItem.taskStatus = cMap.get(item.id).taskStatus;
                  myListData.value[index] = {
                    content: inItem.content,
                    url: ''
                  };
                  myListData.value[index] = inItem;
                  console.log(inItem);
                  break;
                }
              }
            }
          }
          creatingList = creatingList.filter(item => !cMap.has(item.id));
          if (creatingList.length === 0) {
            clearInterval(t);
          }
        }
      });
    }
  }, 5000);
}

// 推荐列表接口
function getRecommendListFun() {
  recommendIsLoading.value = true;
  let data = {
    current: pages.value.current,
    size: pages.value.size
  };
  getRecommendListHttp(data)
    .then(res => {
      if (res.code == 0) {
        if (res.data.records && res.data.records.length > 0) {
          pages.value.current++;
          recommendListData.value = [...recommendListData.value, ...res.data.records];
        } else if (res.data.records.length === 0) {
          recommendListNoMore.value = true;
        }
      }
    })
    .catch(err => {
      if (err.code === -1) {
        // 跳转首页
        comebackIndex();
      }
    });
  recommendIsLoading.value = false;
}

// 模型选择
function modelSelectClick(item) {
  if (item) {
    aiImageData.type = item.type;
  }
}
// 尺寸选择
function sizeClick(itemOut, indexOut) {
  aiImageData.sizeId = itemOut.id;
  sizeListData.value = sizeListData.value.map((item, index) => {
    return { ...item, active: index === indexOut ? true : false };
  });
}
// 风格详情选择
function styleItemClick(itemOut, indexOut) {
  styleItemListData.value = styleItemListData.value.map((item, index) => {
    if (index === indexOut) {
      item.active = true;
      aiImageData.styleId = itemOut.id;
    } else {
      item.active = false;
    }
    return { ...item };
  });
}
// 风格nav选择
function styleChoiceClick(navItem, navIndex) {
  styleChioceListData.value = styleChioceListData.value.map((item, index) => {
    return { ...item, active: index == navIndex ? true : false };
  });

  styleItemListData.value = navItem.styles.map((item, index) => {
    return { ...item, active: index == 0 ? true : false };
  });
  styleItemClick(styleItemListData.value[0], 0);
}

// 模型列表
function imgModelListFun(item) {
  imgModelListHttp()
    .then(res => {
      if (res.code === 0) {
        // console.log(res.data, '模型列表接口');
        imgModelListData.value = res.data;
        if (imgModelListData.value.length > 0) {
          aiImageData.modelId = imgModelListData.value[0].id;
          aiImageData.type = imgModelListData.value[0].type;
        }
      }
    })
    .catch(err => {
      if (err.code === -1) {
        // 跳转首页
        comebackIndex();
      }
    });
}
// 打开充值弹窗
function chargeClick() {
  getRechargeList();
  // console.log('打开充值弹窗');
  // payDialogVisible.value = true;
  // setTimeout(() => {
  //   handleRecharge(rechargeList.value[0], 0);
  // }, 500);
}
// 充值列表
function getRechargeList() {
  rechargeListHttp()
    .then(res => {
      if (res.code === 0) {
        let resultArr = [];
        let result2Arr = [];
        if (res.data.length > 0) {
          resultArr = res.data.filter(item => {
            return item.category === 0;
          });
          result2Arr = res.data.filter(item => {
            return item.category === 1;
          });

          rechargeList.value = resultArr.map((item, index) => {
            item.active = index == 0 ? true : false;
            return { ...item };
          });

          // 拦截列表数据
          interceptList.value = result2Arr.map((item, index) => {
            item.active = index == 0 ? true : false;
            return { ...item };
          });
        }
      }
    })
    .catch(err => {
      if (err.code === -1) {
        // 跳转首页
        comebackIndex();
      }
    })
    .finally(function () {
      handleRecharge(rechargeList.value[0], 0);
      payDialogVisible.value = true;
    });
}
let currentPayItemId = ref(null);
// 选中某个会员卡
function handleRecharge(itemOut, indexOut) {
  bottpmPrice.value = itemOut.price;
  currentPayItemId.value = itemOut.id;
  let resArr = [];
  resArr = rechargeList.value.map((item, index) => {
    if (index === indexOut) {
      item.active = true;
      chargeId.value = itemOut.id;
    } else {
      item.active = false;
    }
    return { ...item };
  });
  rechargeList.value = resArr;
  // 调接口拿到二维码
  getQrCodeFun(itemOut.id);
  // console.log(rechargeList.value, 'rechargeList.value');
}
// 二维码接口
function getQrCodeFun(idOut) {
  if (chargeTimer.value) {
    clearInterval(chargeTimer.value);
    chargeTimer.value = null;
  }
  idOut = idOut ? idOut : currentPayItemId.value;
  getQrCodeHttp({
    id: idOut
  })
    .then(res => {
      if (res.code === 0) {
        qrcode.value = res.data.qrCode;
        // console.log(qrcode.value, 'res.data.qrCode');
        // 开启定时器检测支付状态
        chargeTimer.value = setInterval(() => {
          getPayStatusFun(res.data.orderNo);
        }, 4000);
      }
    })
    .catch(err => {
      if (err.code === -1) {
        // 跳转首页
        comebackIndex();
      }
    });
}
function downloadImage(imgUrl) {
  window.open(imgUrl);
}
// 拦截支付二维码接口
function getInterceptQrCodeFun(id) {
  if (interceptChargeTimer.value) {
    clearInterval(interceptChargeTimer.value);
    interceptChargeTimer.value = null;
  }
  getQrCodeHttp({
    id: id
  })
    .then(res => {
      if (res.code === 0) {
        // console.log(res.data);
        interceptQrcode.value = res.data.qrCode;
        // 开启定时器检测支付状态
        interceptChargeTimer.value = setInterval(() => {
          getInterceptPayStatusFun(res.data.orderNo);
        }, 4000);
      }
    })
    .catch(err => {
      if (err.code === -1) {
        // 跳转首页
        comebackIndex();
      }
    });
}
// 支付状态接口
function getPayStatusFun(orderNo) {
  getPayStatusHttp({
    orderNo: orderNo
  })
    .then(res => {
      if (res.code === 0) {
        // console.log(res.data);
        if (res.data && res.data.status == 2) {
          ElMessage.success('充值成功');
          clearInterval(chargeTimer.value);
          chargeTimer.value = null;
          chargeClose();
          payEnddialogVisible.value = true;
          // 获取用户信息
          userInfoFun();
        }
      }
    })
    .catch(err => {
      if (err.code === -1) {
        // 跳转首页
        comebackIndex();
      }
      clearInterval(chargeTimer.value);
      chargeTimer.value = null;
    });
}
// 拦截支付状态接口
function getInterceptPayStatusFun(orderNo) {
  getPayStatusHttp({
    orderNo: orderNo
  })
    .then(res => {
      if (res.code === 0) {
        // console.log(res.data);
        if (res.data && res.data.status == 2) {
          ElMessage.success('充值成功');
          clearInterval(interceptChargeTimer.value);
          interceptChargeTimer.value = null;
          payInterceptdialogVisible.value = false;
          payEnddialogVisible.value = true;
          // 获取用户信息
          userInfoFun();
        }
      }
    })
    .catch(err => {
      if (err.code === -1) {
        // 跳转首页
        comebackIndex();
      }
      clearInterval(interceptChargeTimer.value);
      interceptChargeTimer.value = null;
    });
}
// 风格选择、尺寸列表字典
function styleSizeListFun() {
  // console.log('风格选择、尺寸列表字典');

  styleSizeListHttp()
    .then(res => {
      if (res.code === 0) {
        if (res.data.styleList.length > 0) {
          styleChioceListData.value = res.data.styleList.map((item, index) => {
            return {
              ...item,
              active: index == 0 ? true : false
            };
          });
          styleItemListData.value = res.data.styleList[0].styles.map((item, index) => {
            return {
              ...item,
              active: index == 0 ? true : false
            };
          });
          styleChoiceClick(styleChioceListData.value[0], 0);
        }
        if (res.data.sizeList.length > 0) {
          sizeListData.value = res.data.sizeList.map((item, index) => {
            return {
              ...item,
              active: index == 0 ? true : false
            };
          });
          sizeClick(sizeListData.value[0], 0);
        }
      }
    })
    .catch(err => {
      if (err.code === -1) {
        // 跳转首页
        comebackIndex();
      }
    });
}
// 收藏网址
function saveUrlClick() {
  ElMessage.warning('请使用Ctrl+D进行添加');
}
// 人工客服
function serviceClick() {
  ElMessage.warning('客服微信：tomorrowff，请微信搜索添加');
  copy('tomorrowff');
}
function copy(value) {
  //新建一个文本框
  let oInput = document.createElement('input');
  //赋值给文本框
  oInput.value = value;
  document.body.appendChild(oInput);
  // 选择对象;
  oInput.select();
  // 执行浏览器复制命令
  document.execCommand('Copy');
  //复制完成删除掉输入框
  oInput.remove();
}
// 退出登录
function logoutClick() {
  loginOutHttp()
    .then(res => {
      if (res.code === 0) {
        localStorage.removeItem('aiToken');
        localStorage.removeItem('userInfo');
        router.push({
          path: '/index'
        });
      }
    })
    .catch(err => {
      if (err.code === -1) {
        // 跳转首页
        comebackIndex();
      }
    });
}
function showPersonalSpread() {
  if (userInfoData.value.isVip != 1) {
    ElMessage.warning('您还未成为尊贵的会员，请充值后查看');
    setTimeout(() => {
      chargeClick();
    }, 800);
    return;
  }
  personalSpreadShow.value = true;
}
function showPersonalClose() {
  personalSpreadShow.value = false;
}
function handleSuccess(response) {
  // console.log('handleSuccess', response);
  if (response.code === 0) {
    ElMessage.success('上传成功');
    aiImageData.img = response.data;
  } else {
    ElMessage.warning(response.msg);
  }
}

// 上传前验证
function handleBeforeUpload(file) {
  // 文件大小限制
  if (file.size > 5 * 1024 * 1024) {
    ElMessage.warning('仅支持5MB以内文件上传');
    return false;
  }
}
// 头像上传前验证
function beforeAvatarUpload(file) {
  // 文件大小限制
  if (file.size > 2 * 1024 * 1024) {
    ElMessage.warning('仅支持2MB以内头像上传');
    return false;
  }
}
// 跳转首页
function comebackIndex() {
  router.push({
    path: 'index'
  });
}
// 头像上传成功
function handleAvatarSuccess(response) {
  // console.log('handleSuccess', response);
  if (response.code === 0) {
    avaImageData.imageStr = response.data;
    let data = { portrait: avaImageData.imageStr };
    changeUserInfoHttp(data).then(res => {
      if (res.code === 0) {
        ElMessage.success('修改成功');
        showPersonalClose();
        userInfoFun();
      } else {
        ElMessage.warning(res.msg);
      }
    });
  } else {
    ElMessage.warning(response.msg);
  }
}
//防抖处理滚动事件
const scrollBottom = debounce(() => {
  if (recommendListData.value.length > 0) {
    scrollBottoms();
    return;
  }
  const { scrollTop, clientHeight, scrollHeight } = scrollContainer.value;
  if (scrollTop + clientHeight >= scrollHeight - 50 && !myListIsLoading.value) {
    if (myListNoMore.value) return;
    getMyListFun();
  }
}, 200);
//防抖处理滚动事件
const scrollBottoms = debounce(() => {
  const { scrollTop, clientHeight, scrollHeight } = scrollContainer.value;
  if (scrollTop + clientHeight >= scrollHeight - 50 && !recommendIsLoading.value) {
    if (recommendListNoMore.value) return;
    getRecommendListFun();
  }
}, 200);

function downImg(url) {
  window.open(url, '_self');
}

function closeViewer() {
  showViewer.value = false;
}
</script>
<style scoped lang="less">
.use-page {
  width: 100%;
  min-width: 1200px;
  background: #050819;
  height: 100vh;
  overflow: hidden;
  .header {
    height: 50px;
    padding: 10px 40px;
    box-sizing: border-box;
    background: #191923;

    .logo {
      color: #ffffff;
      .logo-img {
        width: 30px;
        height: 30px;
        background: url('@/assets/images/index/logo-index.png') no-repeat;
        background-size: cover;
        margin-right: 8px;
      }
      .theme {
        font-size: 18px;
      }
    }
    .personal-center {
      position: relative;
      .personal-service {
        margin-right: 32px;
        align-items: center;
        cursor: pointer;
        .service-img {
          width: 18px;
          height: 18px;
          img {
            width: 18px;
            height: 18px;
          }
        }
        .service-text {
          font-size: 14px;
          color: #e8e8e8;
          margin-left: 4px;
          cursor: pointer;
        }
      }
      .personal-info {
        width: 132px;
        height: 35px;
        background: #373d43;
        border-radius: 20px;
        font-size: 16px;
        color: #e8e8e8;
        cursor: pointer;
        .service-img {
          width: 26px;
          height: 26px;
          img {
            width: 26px;
            height: 26px;
          }
        }
        .portrait-img {
          width: 26px;
          height: 26px;
          border-radius: 16px;
          overflow: hidden;
          img {
            width: 26px;
            height: 26px;
          }
        }
        .service-text {
          margin: 0 8px;
          cursor: pointer;
        }
        .down-spread {
          width: 10px;
          height: 5px;
          img {
            width: 10px;
            height: 5px;
          }
        }
      }
      .personal-spread {
        position: absolute;
        top: 52px;
        right: 0px;
        width: 214px;
        // height: 220px;
        background: #1e1e28;
        border-radius: 12px;
        .line-one {
          box-sizing: border-box;
          width: 214px;
          height: 56px;
          padding: 0 10px 0 17px;
          background: #6053ff;
          border-radius: 12px 12px 0px 0px;
          .avatar {
            width: 26px;
            height: 26px;
            border-radius: 50%;
            overflow: hidden;
            img {
              width: 26px;
              height: 26px;
            }
          }
          .uname {
            flex: 1;
            font-size: 14px;
            color: #e8e8e8;
            margin-left: 8px;

            .input-box {
              width: 100px;
              border: none;
              border-radius: 4px;
            }
            .input-box:focus {
              outline: none;
              border-radius: 4px;
              font-size: 16px;
            }
          }
          .edit {
            width: 16px;
            height: 16px;
            background: url('@/assets/images/use/edit.png') no-repeat;
            background-size: cover;
          }
        }
        .spread-bottom {
          padding-left: 17px;
          .line-two,
          .line-three,
          .line-four {
            height: 54.6px;
            display: flex;
            font-size: 14px;
            color: #e8e8e8;
            flex-direction: column;
            justify-content: center;
            line-height: 20px;
            cursor: pointer;
          }
          .line-four:hover {
            color: #6053ff;
          }
          .item-bottom {
            font-size: 14px;
            color: #6053ff;
            line-height: 20px;
          }
        }
      }
    }
  }
  .use-content {
    // 滚动条框设置
    .content-left::-webkit-scrollbar {
      width: 3px;
      background-color: #242430;
      border-radius: 3px;
    }
    // 滚动条样式设置
    .content-left::-webkit-scrollbar-thumb {
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
      background-color: #70717d;
      border-radius: 3px;
    }
    // 滚动条框设置
    .content-right::-webkit-scrollbar {
      width: 3px;
      background-color: #242430;
      border-radius: 3px;
    }
    // 滚动条样式设置
    .content-right::-webkit-scrollbar-thumb {
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
      background-color: #70717d;
      border-radius: 3px;
    }
    .content-left {
      position: relative;
      box-sizing: border-box;
      height: 95vh;
      overflow-y: scroll;
      width: 458px;
      padding: 16px 18px 200px;
      .describe {
        box-sizing: border-box;
        width: 404px;
        height: 108px;
        background-color: #1e1e28;
        border-radius: 8px;
        padding: 22px 12px;
        .describe-icon {
          width: 44px;
          height: 44px;
          background: url('@/assets/images/use/left-describe-icon.png') no-repeat;
          background-size: cover;
        }
        .describe-text {
          flex: 1;
          margin-left: 8px;
          .text-header {
            font-size: 14px;
            color: #e8e8e8;
          }
          .text-theme {
            margin-top: 6px;
            font-size: 13px;
            color: #e8e8e8;
          }
        }
      }
      .upload-pictures {
        margin-top: 24px;

        .upload-header {
          font-size: 14px;
          color: #e8e8e8;
        }
        .upload-content {
          box-sizing: border-box;
          width: 404px;
          height: 160px;
          background: #1e1e28;
          border-radius: 8px;
          padding: 12px;
          margin-top: 16px;
          .dotted-box {
            box-sizing: border-box;
            width: 380px;
            height: 136px;
            background: url('@/assets/images/use/dotted-box.png') no-repeat;
            background-size: cover;
            padding: 24px 0;
          }
        }
      }
      :deep(.el-icon--upload) {
        width: 34px;
        height: 35px;
      }
      :deep(.el-upload-dragger) {
        padding: 0;
        background-color: transparent;
        border: none;
      }
      :deep(.el-upload__tip) {
        width: 5px;
        height: 12px;
      }
      :deep(.el-upload__text) {
        color: #979797;
      }

      :deep(.el-upload-list__item:hover) {
        background-color: transparent;
      }
      :deep(.el-upload-list) {
        margin-top: 15px;
      }
      //
      .painting-description {
        width: 404px;

        margin-top: 24px;
        .description-header {
          font-size: 14px;
          color: #e8e8e8;
        }
        .description-content {
          box-sizing: border-box;
          height: 160px;
          background: #1e1e28;
          border-radius: 8px;
          padding: 15px;
          margin-top: 16px;
          .textarea {
            background-color: transparent;
            height: 100%;
            width: 100%;
            color: #e8e8e8;
            font-family: AlibabaPuHuiTi_3_55_Regular;
            font-size: 14px;
            resize: none; //禁止缩放
            border: none;
            outline: none; //去除文本域默认边框
          }

          // 滚动条框设置
          .textarea::-webkit-scrollbar {
            width: 6px;
            background-color: #70717d;
            border-radius: 3px;
          }
          // 滚动条样式设置
          .textarea::-webkit-scrollbar-thumb {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
            background-color: #70717d;
            border-radius: 3px;
          }
        }
      }
      .kindly-reminder {
        margin-top: 16px;
        width: 404px;

        height: 32px;
        border-radius: 6px;
        font-size: 13px;
        color: #ffffff;
        background: url('@/assets/images/use/kindly-reminder-bg.png') no-repeat;
        background-size: cover;
      }
      .model-select {
        width: 404px;

        margin-top: 24px;
        .model-header {
          font-size: 14px;
          color: #e8e8e8;
        }
        .model-content {
          height: 32px;
          background: #1e1e28;
          border-radius: 6px;
          margin-top: 16px;
          display: flex !important;
          align-items: center !important;
          :deep(.el-select__wrapper) {
            box-shadow: none !important;
            background: transparent !important;
          }
          :deep(.el-select__selected-item) {
            color: #e8e8e8 !important;
          }
        }
      }
      :deep(.el-select) {
        width: 100%;
      }
      :deep(.el-input__wrapper) {
        background-color: transparent;
        box-shadow: none;
        height: 32px;
      }
      :deep(.el-select .el-input.is-focus .el-input__wrapper) {
        box-shadow: none !important;
      }
      :deep(.el-input__inner) {
        color: #e8e8e8;
      }

      :deep(.model-content .el-select-dropdown) {
        background-color: #1e1e28 !important;
        border: none !important; /* 移除边框 */
        // border: 1px solid red !important;
        box-shadow: none !important;
      }
      //
      // :deep(.el-popper[data-popper-placement^='top']) {
      //   width: 10px;
      //   height: 10px;
      // }
      :deep(.el-popper) {
        overflow: hidden;
      }
      :deep(.el-popper.is-light) {
        border: none !important;
      }
      :deep(.model-content .el-select-dropdown__item) {
        background-color: #1e1e28 !important;
        color: #e8e8e8;
      }
      :deep(.model-content .el-select-dropdown__item:hover) {
        background-color: #373743 !important;
        color: #e8e8e8;
        // font-weight: 700;
        // font-size: 18px;
      }
      :deep(.el-select) {
        --el-select-input-focus-border-color: transparent !important;
        // border: none;
      }
      .style-choice {
        width: 404px;

        margin-top: 24px;
        .style-header {
          font-size: 14px;
          color: #e8e8e8;
        }
        .style-content {
          margin-top: 16px;

          .content-nav {
            width: 404px;
            flex-wrap: wrap;
            // overflow-x: auto;
            // white-space: nowrap;
            // overflow-y: hidden;

            .nav-item {
              box-sizing: border-box;
              width: 48px;
              height: 24px;
              background: #1e1e28;
              color: #979797;
              font-size: 15px;
              margin-right: 8px;
              margin-bottom: 8px;
              border-radius: 6px;
              padding: 2px 8px;
              cursor: pointer;
            }
            .nav-item-active {
              background: url('@/assets/images/use/style-choice-nav-icon.png') no-repeat;
              background-size: cover;
              color: #e8e8e8;
            }
          }
          .content-all {
            flex-wrap: wrap;
            margin-top: 9px;
            .content-item {
              width: 95px;
              height: 60px;
              border-radius: 6px;
              margin-right: 8px;
              margin-bottom: 8px;
              cursor: pointer;
              .item-title {
                width: 100%;
                text-align: center;
                height: 20px;
                font-size: 14px;
                color: #ffffff;
                background: rgba(5, 16, 25, 0.5);
              }
            }
            .content-item:nth-child(4n) {
              margin-right: 0;
            }
            .content-item-active {
              box-sizing: border-box;
              border: 2px solid #6053ff;
            }
          }
          .more-retract {
            margin: 16px auto 0;
            width: 188px;
            height: 26px;
            background: #1e1e28;
            border-radius: 6px;
            font-size: 14px;
            color: #6053ff;
          }
        }
      }
      .image-similarity {
        width: 404px;
        margin-top: 16px;
        .similarity-header {
          font-size: 14px;
          color: #e8e8e8;
        }
        .similarity-value {
          font-size: 14px;
          color: #e8e8e8;
          margin-left: 10px;
        }
      }
      :deep(.el-slider__runway) {
        height: 2px;
      }
      :deep(.el-slider__bar) {
        height: 2px;
        // 51C1FF  8B5FFF
        background: linear-gradient(to right, #51c1ff, #8b5fff);
      }
      :deep(.el-slider__button) {
        width: 15px;
        height: 15px;
        background: url('@/assets/images/use/slider-icon.png') no-repeat;
        background-size: cover;
        margin-top: -2px;
        border: none;
      }
      .generate-size {
        width: 404px;

        margin-top: 24px;
        .size-header {
          font-size: 14px;
          color: #e8e8e8;
        }
        .size-content {
          margin-top: 16px;
          .box-common {
            width: 64px;
            height: 64px;
            background: #1e1e28;
            border-radius: 6px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: center;
            font-size: 14px;
            color: #e8e8e8;
            margin-right: 8px;
            cursor: pointer;
          }
          .box-common-active {
            box-sizing: border-box;
            border: 2px solid #6053ff;
          }
          .size-one-box-bg {
            width: 24px;
            height: 24px;
            background: #373743;
            border-radius: 4px;
          }
          .size-two-box-bg {
            width: 20px;
            height: 38px;
            background: #373743;
            border-radius: 4px;
          }
          .size-three-box-bg {
            width: 36px;
            height: 20px;
            background: #373743;
            border-radius: 4px;
          }
          .size-four-box-bg {
            width: 20px;
            height: 26px;
            background: #373743;
            border-radius: 4px;
          }
          .size-five-box-bg {
            width: 28px;
            height: 20px;
            background: #373743;
            border-radius: 4px;
          }
        }
      }
      .now-create {
        position: fixed;
        left: 20px;
        bottom: -20px;
        z-index: 99;
        margin: 42px auto;
        width: 384px;
        height: 48px;
        font-size: 16px;
        color: #ffffff;
        background: url('@/assets/images/use/now-create-bg.png') no-repeat;
        background-size: cover;
        cursor: pointer;
      }
      .bottom-empty {
        width: 100%;
        height: 100px;
      }
    }
    .content-right {
      box-sizing: border-box;
      // width: 67.5%;
      // width: 972px;
      flex: 1;
      padding: 16px 68px 0 26px;
      height: 95vh;
      overflow-y: scroll;
      // background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.9)),
      //   url('@/assets/images/use/create-bg.png');
      // background-size: cover;
      // background-blend-mode: darken;
      // filter: brightness(0.5);
      .create-result {
        .result-item {
          .result-header {
            .user-avatar {
              width: 32px;
              height: 32px;
              border-radius: 50%;
              overflow: hidden;
              img {
                width: 32px;
                height: 32px;
              }
            }
            .header-right {
              margin-left: 10px;
              display: flex;
              flex-direction: column;
              .user-name {
                font-size: 14px;
                color: #e8e8e8;
              }
              .user-time {
                font-size: 14px;
                color: #979797;
              }
            }
          }
          .result-describe {
            margin-top: 11px;
            margin-left: 6px;
            font-size: 15px;
            color: #e8e8e8;
            line-height: 22px;
          }
          .result-image {
            //width: 300px;
            height: 300px;
            margin-top: 12px;

            img {
              //width: 300px;
              height: 300px;
            }
            cursor: pointer;
            // background: url('@/assets/images/use/result-tem.jpg') no-repeat;
            // background-size: cover;
          }
          .result-image-loading {
            width: 300px; /* 盒子的宽度 */
            height: 300px; /* 盒子的高度 */
            position: relative;
            background:
              linear-gradient(45deg, #00172a 30%, #020111 70%),
              radial-gradient(circle at 65% 30%, rgba(255, 255, 255, 0.8) 2%, transparent 9%);
            background-blend-mode: screen;
            animation: starrySky 12s linear infinite;
            border-radius: 8px;
            overflow: hidden;
          }
          @keyframes starrySky {
            0% {
              background-position:
                0% 0%,
                50% 50%;
            }

            100% {
              background-position:
                100% 100%,
                50% 50%;
            }
          }
          .result-image-loading::after {
            content: '图片生成中...';
            position: absolute;
            bottom: 12px;
            left: 12px;
            color: #a9adc7;
            font-size: 13px;
          }
          /* 闪烁星星特效 */
          .result-image-loading::before {
            content: '';
            position: absolute;
            width: 2px;
            height: 2px;
            background: white;
            box-shadow:
              120px 30px white,
              140px 210px white,
              20px 90px white,
              50px 240px white,
              70px 150px white,
              220px 150px white,
              240px 240px white;

            animation: twinkle 1.5s ease-in-out infinite;
          }
          @keyframes twinkle {
            0%,
            100% {
              opacity: 0.3;
            }
            50% {
              opacity: 1;
            }
          }
          .result-btn-line-one {
            height: 32px;
            margin-top: 12px;
            align-items: center;
            .edit {
              font-size: 14px;
              color: #6053ff;
              margin-right: 6px;
            }
            .edit-item {
              width: 58px;
              height: 32px;
              background: #1e1e28;
              border-radius: 8px;
              font-size: 14px;
              color: #e8e8e8;
              margin-right: 11px;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
  :deep(.pay-dialog .el-dialog) {
    //width: 934px;
    width: 6.468rem;
    overflow: hidden;
    border-radius: 32px;
    margin-top: 20px;
    background-color: transparent;
  }
  :deep(.pay-dialog .el-dialog__body) {
    background-color: #fff;
    border-radius: 0 0 32px 32px;
  }
  :deep(.image-dialog .el-dialog) {
    width: 450px;
    background-color: transparent;
  }
  :deep(.end-dialog .el-dialog) {
    width: 320px;
    height: 210px;
    background: linear-gradient(180deg, #dad7fe 0%, #ffffff 100%);
    border-radius: 24px;
  }
  .end-dialog {
    position: relative;
    .end-dialog-content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .line-one {
        font-family: AlibabaPuHuiTi_3_65_Medium;
        font-size: 18px;
        color: #333333;
        line-height: 25px;
        font-weight: 700;
      }
      .line-two {
        margin-top: 12px;
        font-family: AlibabaPuHuiTi_3_55_Regular;
        font-size: 14px;
        color: #333333;
        line-height: 20px;
      }
      .line-three {
        margin-top: 24px;
        width: 200px;
        height: 48px;
        font-size: 16px;
        color: #ffffff;
        background: url('@/assets/images/use/again-buy.png') no-repeat;
        background-size: cover;
      }
    }
    .close-icon {
      position: absolute;
      top: -48px;
      right: -172px;
      width: 32px;
      height: 32px;
      background: url('@/assets/images/use/pay-close-icon.png') no-repeat;
      background-size: cover;
    }
  }
  :deep(.end-dialog) {
    background-color: transparent;
  }
  :deep(.end-dialog .el-dialog__headerbtn) {
    font-size: 0;
  }
  :deep(.pay-dialog .el-dialog) {
    .my-header {
      height: 88px;
      padding: 0 48px;
      background: url('@/assets/images/use/pay-header-bg.png') no-repeat;
      background-size: cover;
      border-radius: 32px 32px 0 0;
      .user-name {
        max-width: 200px;
        overflow: hidden;
        margin-left: 14px;
      }
      .additional-remarks {
        margin: 0 auto;
        color: #fff;
        font-size: 18px;
        text-align: center;
        margin-right: 320px;
      }
    }
    .pay-dialog-content {
      box-sizing: border-box;
      padding: 0 6px 4px 16px;
      margin-top: -15px;
      .left {
        //width: 233px;
        width: 1.614rem;
        .vip-image {
          .vip-image-bg {
            width: 233px;
            height: 152px;
            background: url('@/assets/images/use/vip-image.png') no-repeat;
            background-size: cover;
          }
        }
        .describe-header {
          font-size: 18px;
          color: #333333;
          line-height: 25px;
          font-weight: 700;
        }
        .describe-item {
          font-size: 12px;
          color: #333333;
          line-height: 20px;
        }
        .vip-describe-item {
          box-sizing: border-box;
          width: 233px;
          height: 36px;
          background: #fff5e9;
          border-radius: 12px;
          font-size: 12px;
          color: #4c380e;
          margin-bottom: 8px;
          padding-left: 8px;
          .icon-item {
            width: 24px;
            height: 24px;
            margin-right: 10px;
          }
          .icon-one {
            background: url('@/assets/images/use/vip-serve-icon-one.png') no-repeat;
            background-size: cover;
          }
          .icon-two {
            background: url('@/assets/images/use/vip-serve-icon-two.png') no-repeat;
            background-size: cover;
          }
          .icon-three {
            background: url('@/assets/images/use/vip-serve-icon-three.png') no-repeat;
            background-size: cover;
          }
        }
        .wechat-number {
          width: 100%;
          font-size: 16px;
          color: #333333;
          margin-top: 24px;
        }
        .margin-7 {
          margin-top: 7px;
        }
        .margin-11 {
          margin-top: 11px;
        }
        .margin-26 {
          margin-top: 26px;
        }
      }
      .right {
        margin-left: 28px;
        flex: 1;
        .top {
          .top-item {
            flex: 1;
            height: 295px;
            background: #efeefa;
            border-radius: 16px;
            padding-top: 26px;
            margin-right: 8px;
            margin-top: 10px;
            cursor: pointer;
            .item-title {
              font-size: 18px;
              color: #333333;
            }
            .item-price {
              font-size: 28px;
              font-weight: 700;
              color: #6053ff;
              margin: 8px 0 5px;
            }
            .item-introduce {
              p {
                font-size: 14px;
              }
            }
          }
          .top-item-active {
            background: linear-gradient(137deg, #7ccdfe 0%, #d473ff 33%, #63ceff 72%, #6053ff 100%);
            cursor: pointer;
            .item-title {
              font-size: 18px;
              color: #ffffff;
            }
            .item-price {
              font-size: 28px;
              font-weight: 700;
              color: #ffffff;
              margin: 8px 0 5px;
            }
          }
        }
        .bottom {
          margin-top: 20px;
          .pay-code {
            width: 148px;
            height: 148px;
            border: 1px solid #e4e4e4;
            img {
              width: 148px;
              height: 148px;
            }
          }
          .pay-introduce {
            margin-left: 12px;
            .pay-price {
              font-size: 38px;
              font-weight: 700;
              color: #6053ff;
            }
            .pay-type {
              margin: 18px 0 10px;
              .type-icon {
                width: 24px;
                height: 24px;
                background: url('@/assets/images/use/pay-type-icon.png') no-repeat;
                background-size: cover;
              }
              .type-text {
                margin-left: 12px;
                font-size: 12px;
                color: #333333;
              }
            }
            .pay-protocol {
              .check-icon-box {
                width: 24px;
                height: 24px;
                .check-icon {
                  width: 16px;
                  height: 16px;
                  background: url('@/assets/images/use/protocol-check-icon.png') no-repeat;
                  background-repeat: no-repeat;
                  background-size: cover;
                }
              }
              .check-text {
                margin-left: 12px;
                font-size: 12px;
                color: #333333;
                .link-text {
                  color: #6053ff;
                }
              }
            }
          }
          .refurbish-code {
            width: 160px;
            height: 50px;
            background: #050819;
            border-radius: 30px;
            font-size: 16px;
            color: #ffffff;
            cursor: pointer;
          }
        }
      }
    }
  }
  :deep(.pay-end-dialog .el-dialog) {
    width: 394px;
    border-radius: 24px;
  }

  .image-dialog {
    position: relative;
    background-color: transparent;
    .image-dialog-content {
      img {
        width: 450px;
      }
    }
    .close-icon {
      position: absolute;
      top: -48px;
      right: -172px;
      width: 48px;
      height: 48px;
      background: url('@/assets/images/use/pay-close-icon.png') no-repeat;
      background-size: cover;
    }
    .download-icon {
      position: absolute;
      bottom: 0px;
      right: -172px;
      width: 60px;
      height: 60px;
      img {
        width: 60px;
        height: 60px;
      }
    }
  }
  :deep(.image-dialog) {
    background-color: transparent;
  }
  :deep(.image-dialog .el-dialog__headerbtn) {
    font-size: 0;
  }
  :deep(.image-dialog) {
    background-color: transparent;
  }

  .pay-end-dialog {
    background-color: transparent;
    .pay-end-dialog-content {
      .line-one {
        width: 164px;
        height: 120px;
        background: url('@/assets/images/use/charge-end.png') no-repeat;
        background-size: cover;
      }
      .line-two {
        margin-top: 10px;
        font-size: 32px;
        color: #34c759;
      }
      .line-three {
        margin-top: 6px;
        font-size: 24px;
        color: #333333;
      }
      .line-four {
        margin-top: 20px;
        width: 286px;
        height: 72px;
        font-size: 20px;
        color: #ffffff;
        background: url('@/assets/images/use/immediate-try.png') no-repeat;
        background-size: cover;
      }
      .line-five {
        margin-top: 20px;
        font-size: 16px;
        color: #333333;
      }
      .line-six {
        font-size: 16px;
        color: #007aff;
      }
      .line-seven {
        margin-top: 16px;
        font-size: 16px;
        color: #333333;
        span {
          color: #ff453a;
        }
      }
    }
    .close-icon {
      position: absolute;
      top: -48px;
      right: -172px;
      width: 48px;
      height: 48px;
      background: url('@/assets/images/use/pay-close-icon.png') no-repeat;
      background-size: cover;
    }
  }

  .pay-intercept-dialog {
    position: relative;
    .pay-intercept-dialog-content {
      padding: 89px 20px 40px;
      // background-color: #fff;
      .intercept-header {
        font-size: 28px;
        color: #ffffff;
        font-weight: 700;
      }
      .intercept-content {
        margin-top: 68px;
        align-items: center;
        .left {
          width: 162px;
          height: 162px;
          background: linear-gradient(137deg, #7ccdfe 0%, #d473ff 33%, #63ceff 72%, #6053ff 100%);
          border-radius: 12px;
          justify-content: center;
        }
        .right {
          margin-left: 21px;
          .item-introduce {
            p {
              font-size: 14px;
            }
          }
        }
        .left-one {
          font-size: 20px;
          color: #ffffff;
        }
        .left-two {
          font-size: 30px;
          color: #ffffff;
          margin-top: 12px;
        }
      }
      .intercept-footer {
        position: relative;
        margin-top: 18px;
        padding: 12px 12px;
        box-sizing: border-box;
        width: 448px;
        height: 128px;
        background: rgba(255, 255, 255, 0.88);
        border-radius: 12px;
        .pay-code {
          width: 100px;
          height: 100px;
          border: 1px solid #e4e4e4;
          img {
            width: 100px;
            height: 100px;
          }
        }
        .pay-introduce {
          margin-left: 12px;
          .pay-price {
            font-size: 28px;
            font-weight: 700;
            color: #6053ff;
          }
          .pay-type {
            margin: 6px 0 10px;
            .type-icon {
              width: 16px;
              height: 16px;
              background: url('@/assets/images/use/pay-type-icon.png') no-repeat;
              background-size: cover;
            }
            .type-text {
              margin-left: 8px;
              font-size: 12px;
              color: #333333;
            }
          }
          .pay-protocol {
            .check-icon-box {
              width: 16px;
              height: 16px;
              .check-icon {
                width: 15px;
                height: 15px;
                background: url('@/assets/images/use/protocol-check-icon.png') no-repeat;
                background-size: cover;
              }
            }
            .check-text {
              margin-left: 8px;
              font-size: 12px;
              color: #333333;
            }
          }
        }
        .refurbish-code {
          position: absolute;
          top: 24px;
          right: 16px;
          width: 133px;
          height: 42px;
          background: #050819;
          border-radius: 30px;
          font-size: 16px;
          color: #ffffff;
          cursor: pointer;
        }
      }
    }
    .close-icon {
      position: absolute;
      top: -18px;
      right: -12px;
      width: 48px;
      height: 48px;
      background: url('@/assets/images/use/pay-close-icon.png') no-repeat;
      background-size: cover;
    }
    .link-text {
      color: #6053ff;
    }
  }
  :deep(.pay-intercept-dialog .el-dialog) {
    background-color: transparent;
  }

  :deep(.pay-intercept-dialog .el-dialog__body) {
    margin-top: -35px;
    margin-left: 35px;
    width: 458px;
    height: 547px;
    background: url('@/assets/images/use/pay-intercept-bg.png') no-repeat;
    background-size: cover;
    padding: 0;
    border-radius: 24px;
  }
  :deep(.pay-intercept-dialog .el-dialog__header) {
    padding: 0;
  }
  :deep(.pay-intercept-dialog .el-dialog__headerbtn) {
    font-size: 0;
  }

  :deep(.pay-dialog .el-dialog__header) {
    padding: 0;
    margin-right: 0;
  }
  :deep(.pay-dialog .el-dialog__title) {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #ffffff;
  }
  :deep(.pay-dialog .el-dialog__title .avatar-icon) {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    margin-right: 12px;
    overflow: hidden;
    img {
      width: 28px;
      height: 28px;
    }
  }
  :deep(.pay-dialog .close-icon) {
    width: 32px;
    height: 32px;
    background: url('@/assets/images/use/pay-close-icon.png') no-repeat;
    background-size: cover;
  }
  :deep(.pay-dialog .el-dialog__headerbtn) {
    font-size: 0;
  }
  :deep(.pay-end-dialog .el-dialog__headerbtn) {
    font-size: 0;
  }
}

@keyframes slideImg {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(300%);
  }
}

.sliderImg {
  height: 300px;
  width: 600px;
  background: linear-gradient(
    to right,
    #6b7280 0%,
    #6b7280 15%,
    #858e9a 50%,
    #6b7280 85%,
    #6b7280 100%
  );
  animation: slideImg 3s linear infinite;
}

.sliderImgContainer {
  position: relative;
  height: 300px;
  width: 500px;
  margin-top: 12px;
  overflow: hidden;
  background-color: #6b7280;
}

.sliderImgText {
  position: absolute;
  left: 5px;
  bottom: 5px;
  color: #a9adc7;
  font-size: 13px;
}

.uploadImgStyle {
  height: 190px;
}

.upload-content-img {
  position: relative;
  box-sizing: border-box;
  height: 160px;
  border-radius: 8px;
  margin-top: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.upload-content-img:hover .backgroundUploadDelete {
  opacity: 1;
}

.backgroundUpload {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 160px;
  background-size: cover;
  filter: blur(5px);
}

.backgroundUploadDelete {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  opacity: 0;
}

.userImgContainer {
  position: relative;
  height: 300px;
  display: flex;
  justify-content: left;
  align-items: center;
  overflow: hidden;
}

.userImgContainer:hover .userImgDownloadBtn {
  opacity: 1;
}

.userImg {
  height: 100%;
  object-fit: contain;
}

.userImgDownloadBtn {
  position: absolute;
  right: 0;
  bottom: -10px;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  opacity: 0;
}
</style>
